import React from 'react';
import { Button } from 'antd';
import { useHistory } from '@/utils';
import { useStore } from '@/stores';
import notFoundPng from '@/assets/images/404.png';
import styles from './index.module.less';

const NotFound = () => {
  const hstory = useHistory();
  const { lang } = useStore();
  const isEn = lang === 'en';

  return (
    <div className={styles.layout}>
      <img src={notFoundPng} alt="" />
      <div>{isEn ? ' Sorry, the page you visited does not exist.' : '抱歉！此页面未找到。'}</div>
      <Button
        type="primary"
        onClick={() => {
          hstory.replace('/');
        }}
      >
        {isEn ? 'Back Home' : '返回首页'}
      </Button>
    </div>
  );
};

export default React.memo(NotFound);
